import React from 'react';

interface TomatoProgressProps {
  progress: number; // 0-100
  size?: number;
}

const TomatoProgress: React.FC<TomatoProgressProps> = ({ progress, size = 220 }) => {
  const progressHeight = (progress / 100) * size;
  const waveHeight = Math.max(8, size * 0.08);
  
  return (
    <div className="flex flex-col items-center">
      <div className="relative" style={{ width: size, height: size }}>
        <svg
          width={size}
          height={size}
          viewBox="0 0 200 200"
          className="tomato-progress transform transition-transform duration-300 hover:scale-[1.03]"
        >
          <defs>
            <clipPath id="tomatoMask">
              <path
                d="M100 38 C78 38, 52 62, 52 96 C52 130, 70 152, 100 168 C130 152, 148 130, 148 96 C148 62, 122 38, 100 38 Z"
              />
            </clipPath>
            <linearGradient id="tomatoGradient" x1="0%" y1="0%" x2="0%" y2="100%">
              <stop offset="0%" stopColor="hsl(9 95% 68%)" />
              <stop offset="100%" stopColor="hsl(9 88% 58%)" />
            </linearGradient>
            <linearGradient id="tomatoHighlight" x1="0%" y1="0%" x2="100%" y2="100%">
              <stop offset="0%" stopColor="rgba(255,255,255,0.35)" />
              <stop offset="60%" stopColor="rgba(255,255,255,0)" />
            </linearGradient>
          </defs>
          
          {/* 番茄外形阴影 */}
          <path
            d="M100 36 C74 36, 48 64, 48 96 C48 134, 70 160, 100 178 C130 160, 152 134, 152 96 C152 64, 126 36, 100 36 Z"
            fill="rgba(255, 138, 128, 0.2)"
          />

          {/* 番茄轮廓 */}
          <path
            d="M100 38 C78 38, 52 62, 52 96 C52 130, 70 152, 100 168 C130 152, 148 130, 148 96 C148 62, 122 38, 100 38 Z"
            fill="hsl(var(--muted))"
            stroke="hsl(var(--border))"
            strokeWidth="2.5"
          />
          
          {/* 番茄填充带波浪 */}
          <g clipPath="url(#tomatoMask)">
            <rect
              x="40"
              y={200 - progressHeight}
              width="120"
              height={progressHeight}
              fill="url(#tomatoGradient)"
            />
            <g className="tomato-wave-group">
              <path
                d={`M20 ${200 - progressHeight + waveHeight}
                  Q50 ${200 - progressHeight - waveHeight}, 80 ${200 - progressHeight + waveHeight}
                  T140 ${200 - progressHeight + waveHeight}
                  T200 ${200 - progressHeight + waveHeight}`}
                fill="rgba(255,255,255,0.25)"
              />
              <path
                d={`M20 ${200 - progressHeight + waveHeight * 1.6}
                  Q55 ${200 - progressHeight}, 90 ${200 - progressHeight + waveHeight * 1.6}
                  T150 ${200 - progressHeight + waveHeight * 1.6}
                  T210 ${200 - progressHeight + waveHeight * 1.6}`}
                fill="rgba(255,255,255,0.18)"
              />
            </g>
            <g className="tomato-wave-group fast">
              <path
                d={`M0 ${200 - progressHeight + waveHeight * 0.6}
                  Q35 ${200 - progressHeight - waveHeight * 0.8}, 70 ${200 - progressHeight + waveHeight * 0.6}
                  T130 ${200 - progressHeight + waveHeight * 0.6}
                  T190 ${200 - progressHeight + waveHeight * 0.6}`}
                fill="rgba(255,255,255,0.15)"
              />
            </g>
            <rect
              x="40"
              y="30"
              width="120"
              height="140"
              fill="url(#tomatoHighlight)"
              opacity="0.7"
            />
          </g>
          
          {/* 番茄顶部茎叶更自然 */}
          <g stroke="hsl(var(--mint-soft))" strokeWidth="3.5" strokeLinecap="round" fill="none">
            <path d="M100 36 Q96 22, 86 22" />
            <path d="M100 36 Q104 18, 118 24" />
            <path d="M100 36 Q108 26, 112 16" />
          </g>
          
          {/* 可爱的眼睛（当进度>20%时显示）*/}
          {progress > 20 && (
            <>
              <circle cx="84" cy="82" r="4" fill="hsl(var(--foreground))" className="animate-pulse" />
              <circle cx="116" cy="82" r="4" fill="hsl(var(--foreground))" className="animate-pulse" />
            </>
          )}
          
          {/* 微笑（当进度>60%时显示）*/}
          {progress > 60 && (
            <path
              d="M82 104 Q100 118, 118 104"
              stroke="hsl(var(--foreground))"
              strokeWidth="2.5"
              strokeLinecap="round"
              fill="none"
              className="animate-pulse"
            />
          )}
        </svg>
      </div>
      
      <div className="mt-4 text-center">
        <p className="text-2xl font-bold text-primary">
          {Math.round(progress)}%
        </p>
        <p className="text-sm text-muted-foreground">
          番茄成长中...
        </p>
      </div>
    </div>
  );
};

export default TomatoProgress;